<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  table {
    width: 600px;
    text-align: center;
      margin: 110px auto;
  }
  table,th,td {
    border: 1px solid #ccc;
    /* border-collapse表示边框合并为一个单一的边框‌ 不加这个表格会很丑*/
    border-collapse: collapse;
  }
  caption {
    font-size: 18px;
    /*下边距*/
    margin-bottom: 10px;
    /*字体粗细*/
    font-weight: 700;
  }
  tr {
      height: 40px;
      cursor: pointer;
  }
  table tr:nth-child(1) {
      background-color: #ddd;
  }
  table tr:not(:first-child):hover {
      background-color: #eee;
  }

</style>
<body>
    <table>
      <caption>学生列表</caption>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>住址</th>
      </tr>
      <script>
        // 1. 数据准备
        let students = [
          { name: '小明', age: 18, gender: '男', hometown: '河北省' },
          { name: '小红', age: 19, gender: '女', hometown: '河南省' },
          { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
          { name: '小丽', age: 18, gender: '女', hometown: '山东省' },
          { name: '晓强', age: 16, gender: '女', hometown: '蓝翔技校' }
        ]
        for (let i = 0; i < students.length; i++) {
            let student = students[i];
            document.write(`<tr>
        <th>${student.name}</th>
        <th>${student.age}</th>
        <th>${student.gender}</th>
        <th>${student.hometown}</th>
      </tr>`)
        }
      </script>
    </table>
</body>
</html>